<template>
  <div :class="['login-wrapper', ['', 'login-form-right', 'login-form-left'][direction]]">
    <!--第一个弹窗 用户注册页面-->
    <div>
      <el-form
        :model="form"
        ref="form"
        :rules="rules"
        label-width="100px">
        <el-form-item
          prop="name">
            <span slot="label">
              <span style="color: #000;font-weight: 700;">Name:</span>
            </span>
          <el-input
            :maxlength="20"
            placeholder="Enter Your Name..."
            clearable/>
        </el-form-item>
        <el-form-item
          prop="email">
            <span slot="label">
              <span style="color: #000;font-weight: 700;">Email:</span>
            </span>
          <el-input
            :maxlength="20"
            placeholder="Enter Your Email..."
            clearable/>
        </el-form-item>
        <el-form-item
          prop="order_id">
            <span slot="label">
              <span style="color: #000;font-weight: 700;">Order ID:</span>
            </span>
          <el-input
            :maxlength="20"
            placeholder="Enter Your Order ID..."
            clearable/>
        </el-form-item>

      </el-form>
    </div>
    <register
      :visible.sync="dialogVisible"
      :data="form"
      @doNext=doNext
      @doActivateEnd=doActivateEnd
      @handleClose=handleClose
      ref="buyerConfig"
    />
    <!--第二个弹窗 注册成功页面-->
    <register-success
      :visible.sync="showRegisterSuccess"
      :data="form"
      @getRegister=getRegister
      @handleClose=handleClose
      ref="buyerConfigRegister"
    />
    <!--第三个弹窗 礼品选择页面-->
    <gift-selection
      :visible.sync="showGifSelection"
      :data="form"
      @getGiftSelection=getGiftSelection
      @doBack=doBack
      @handleClose=handleClose
      ref="giftRef"
      />
    <!--第四个弹窗 判断评论页面-->
    <comment-on
      :visible.sync="showCommentOn"
      :data="form"
      @getCommonOn=getCommonOn
      @handleClose=handleClose
      @doBackGiftSelection=doBackGiftSelection
      ref="commentRef"
    />
    <!--第五个弹窗 亚马逊留评页面-->
    <amazon-comment
      :visible.sync="showAmazonComment"
      :data="form"
      @getConfirmGiftPage=getConfirmGiftPage
      @handleClose=handleClose
      ref="amazonRef"
    />
    <!--第六个弹窗 确认礼品 产品页面-->
    <product-page
      :visible.sync="showProduct"
      :data="form"
      @handleClose=handleClose
      @doConfirmProduct=doConfirmProduct
      ref="productRef"
    />
    <!--第七个弹窗 确认礼品 礼品卡-->
    <gift-card
      :visible.sync="showGiftCard"
      :data="form"
      @handleClose=handleClose
    />
    <!--第八个弹窗 确认礼品 返现-->
    <cash-back
      :visible.sync="showCashBack"
      :data="form"
      @handleClose=handleClose
    />
    <!--最后弹窗 结束流程-->
    <end-page
      :visible.sync="showEnd"
      :data="form"
      @handleClose=handleClose
      ref="endRef"
    />


  </div>
</template>

<script>
import setting from '@/config/setting';
import GiftSelection from "@/views/evaluation/gift-selection";
import RegisterSuccess from "@/views/evaluation/register-success";
import Register from "@/views/evaluation/register";
import CommentOn from "@/views/evaluation/comment-on";
import AmazonComment from "@/views/evaluation/amazon-comment";
import ProductPage from "@/views/evaluation/product-page";
import NProgress from "nprogress";
import EndPage from "@/views/evaluation/end-page";
import GiftCard from "@/views/evaluation/gift-card";
import CashBack from "@/views/evaluation/cash-back";

export default {
  name: 'InviteComments',
  components: {
    CashBack,
    GiftCard, EndPage, ProductPage, AmazonComment, CommentOn, Register, RegisterSuccess, GiftSelection},
  data() {
    return {
      // 登录框方向, 0居中, 1居右, 2居左
      direction: 0,
      // 加载状态
      loading: false,
      // 表单数据
      form: {
        record_id:0,
        name:'',
        display_comment_link:0,
        display_comment_link_view:0,
        display_gift_select_view:0,
        email:'',
        order_name:'',
        order_email:'',
        order_id:'',
        gift_type:0,
        rate:0,
        comment:'',
        phone:'',
        address:'',
        state:'',
        postal_code:'',
        country:'',
        city:'',
        asin:'',
        gift_name:'',
        gift_image:'',
        gift_address_display:0,
        gift_email:'',
        product_title:'',
        platform_sku:'',
        brand_code:'',
        gift_type_2:1,
        sensitive_user:0,
        gift_info:{}
      },
      buyerConfig:{
        register_page_script:''
      },
      dialogVisible:true,
      showRegisterSuccess:false,
      showGifSelection:false,
      showCommentOn:false,
      showAmazonComment:false,
      showProduct:false,
      showEnd:false,
      showGiftCard:false,
      showCashBack:false,
    };
  },
  computed: {
    // 表单验证规则
    rules() {
      return {

      };
    },
    // 当前语言
    language() {
      return this.$i18n.locale;
    }
  },
  mounted() {
     setting.takeToken();
     //获取买家端设置信息
    this.getBuyerConfig();
    //记录访客日志
    this.visitorsRecord();
  },
  methods: {
    //记录访客日志
    visitorsRecord()
    {
      var logId = this.$route.query.log_id;
      if (logId ==undefined){
        logId = '';
      }
      this.$http.post('/setVisitorsRecord?log_id='+logId).then((res) => {
        const result = res.data;
        if (result.code === 0) {
          // 赋予对象值
          this.$refs.buyerConfig.setRecordId(result.data.record_id);
        } else {
          this.$message.error(result.msg);
        }
      }).catch((e) => {
        console.error(e);
        this.$message.error(e.message);
      });

    },
    //关闭所有弹窗
    handleClose()
    {
      this.dialogVisible=false;
      this.showRegisterSuccess = false;
      this.showGifSelection = false;
      this.showCommentOn = false;
      this.showAmazonComment = false;
      this.showProduct = false;
      this.showEnd = false;
      this.showGiftCard = false;
      this.showCashBack = false;
    },

    //获取买家端配置信息
    getBuyerConfig()
    {
      this.$http.get('/getBuyerConfig', this.form).then((res) => {
        this.loading = false;
        if (res.data.code === 0) {
          this.buyerConfig = res.data.data;
          this.$refs.buyerConfig.setBuyerConfig(res.data.data);
          this.$refs.buyerConfigRegister.setBuyerConfig(res.data.data);
          this.$refs.endRef.setBuyerConfig(res.data.data);
          this.$refs.giftRef.setBuyerConfig(res.data.data);
          this.$refs.commentRef.setBuyerConfig(res.data.data);
          this.$refs.amazonRef.setBuyerConfig(res.data.data);
          this.$refs.productRef.setBuyerConfig(res.data.data);
        } else {
          this.$message({type:'error',message:res.data.msg,offset:160});
        }
      });
    },
    //第一步激活成功进入下一步
    doNext(form)
    {
      this.dialogVisible=false;
      this.showRegisterSuccess = true;
      this.form = form;
      this.$refs.giftRef.setForm(this.form);
      this.$refs.buyerConfigRegister.setForm(this.form);
      this.configProduct();

    },
    //激活异常直接进入最后步骤
    doActivateEnd()
    {
      this.dialogVisible=false;
      this.showEnd = true;
    },
    //打开激活弹窗
    getRegister()
    {
      this.showRegisterSuccess = false;
      if (this.form.display_gift_select_view ==1){
        this.showGifSelection =true;
      }else{
        this.showCommentOn = true;
      }

    },
    //返回上一步
    doBack()
    {
      this.showRegisterSuccess = true;
      this.showGifSelection =false;
    },
    //返回礼品选择弹窗
    doBackGiftSelection()
    {
      if (this.form.display_gift_select_view ==1){
        this.showGifSelection =true;
        this.showCommentOn = false;
      }else{
        this.showCommentOn = false;
        this.showRegisterSuccess = true;
      }

    },
    //打开评论弹窗
    getGiftSelection(form)
    {
      this.showGifSelection = false;
      this.showCommentOn = true;
      this.form = form;
    },
    //受买家端设置影响 部分操作数据统一调用
    configProduct(){
      this.form.no_verify=1;
      this.$http.post('/confirmProduct', this.form).then((res) => {
        this.loading = false;
        if (res.data.code === 0) {
          console.log('-------aaa---------');
        } else {
          this.$message({type:'error',message:res.data.msg,offset:160});
        }
      });
    },
    //打开Amazon弹窗
    getCommonOn(form)
    {
      this.form.rate = form.rate;
      this.showCommentOn = false;
      this.configProduct();

      if (this.form.rate >=this.buyerConfig.star_rating){
        this.showAmazonComment = true;
      }else{
        if (this.form.gift_type === 1){
          this.showCommentOn = false;
          this.showProduct = true;
          this.$refs.productRef.setForm(this.form);
        }else if (this.form.gift_type ===2){
          this.showGiftCard = true;
        }else if (this.form.gift_type ===3){
          this.showCashBack = true;
        }else{
          this.showEnd = true;
        }
      }
    },
    //进入最后一个弹窗
    doEnd()
    {
      this.showProduct = false;
      this.showEnd = true;
    },
    //展示礼品页弹窗
    getConfirmGiftPage(form)
    {
      this.form.comment = form.comment;
      this.form.sensitive_user = form.sensitive_user;

      if (this.buyerConfig.address_show ===1){ //是否展示收货地址界面
          if (this.form.display_gift_select_view ===1){ //跳转产品页面
            this.showAmazonComment =false;
            this.showProduct = true;
            this.$refs.productRef.setForm(this.form);
          }else{
            this.doConfirmComment('showGiftCard');
          }
      }else{
        this.showAmazonComment =false;
        this.showEnd = true;

      }

      // else if (this.form.gift_type ===2){
      //   this.doConfirmComment('showGiftCard');
      // }else if (this.form.gift_type ===3){
      //   this.doConfirmComment('showCashBack');
      // }
    },
    //确认提交评论信息
    doConfirmComment(type)
    {
      this.$http.post('/confirmComment', this.form).then((res) => {
        this.loading = false;
        if (res.data.code === 0) {
          // this.$message.success('激活成功');
          this.$message({type:'success',message:res.data.msg,offset:160,duration:3000});
          this.showAmazonComment =false;
          setTimeout(() => {
            NProgress.done(true);
            if (type == 'showGiftCard'){
              this.showGiftCard = true;
            }else if (type == 'showCashBack'){
              this.showCashBack = true;
            }
          }, 1500);
        } else {
          // this.$message.error(res.data.msg);
          this.$message({type:'error',message:res.data.msg,offset:160,duration:3000});
        }
      });
    },
    //确认提交产品信息
    doConfirmProduct()
    {
      this.$http.post('/confirmProduct', this.form).then((res) => {
        this.loading = false;
        if (res.data.code === 0) {
          // this.$message.success('激活成功');
          this.$message({type:'success',message:res.data.msg,offset:160});
          setTimeout(() => {
            NProgress.done(true);
            this.doEnd();
          }, 1500);
        } else {
          // this.$message.error(res.data.msg);
          this.$message({type:'error',message:res.data.msg,offset:160});
        }
      });
    },

    /* 跳转到首页 */
    goHome() {
      const query = this.$route.query;
      const path = query && query.from ? query.from : '/';
      this.$router.push(path).catch(() => {
      });
    },
  }
}
</script>

<style scoped>

::v-deep element.style{
  color: #000;
  font-weight: 700;
}

/*alert 成功弹出框样式*/
.el-message--success {
  top: 80px !important;
}

.el-message .el-icon-success {
  font-size: 18px;
}

.el-message--success .el-message__content {
  font-size: 18px;
  font-weight: 300;
}


::v-deep  .el-dialog {
  position: relative;
  margin: 0 auto 50px;
  border-radius: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  box-sizing: border-box;
  width: 50%;
  overflow: hidden;
  background: linear-gradient(to right, rgb(55,71,90), rgb(35,47,62));
}

::v-deep .el-dialog__header {
  --el-text-color-primary: #1EFFFF;
  --el-text-color-regular: #fff;
  background: rgba(152,166,185,0.5);
}
::v-deep .el-dialog__body {
  --el-text-color-primary: #1EFFFF;
  --el-text-color-regular: #fff;
  background: rgba(152,166,185,0.5);
}
::v-deep .el-dialog__footer {
  --el-text-color-primary: #1EFFFF;
  --el-text-color-regular: #fff;
  background: rgba(152,166,185,0.5);
}

</style>
